<template>
  <div>
       <div class="header">
        <router-link to="/home" tag="div" class="icon-back">
            <i class="iconfont">&#xe624;</i>
        </router-link>
        <div class="header-top">缺勤记录表</div>
        <div class="edit" @touchend="changeEdit">{{edit}}</div>
       </div>
       
        <div class="center-box" v-for="(items, index) in proData" :key="index">
            <el-collapse  v-for="(item, time) in items" :key="time" >
              <el-collapse-item class="mycoll">
                <template slot="title">{{time}}--({{getweek(time)}})</template>
                <transition>
                  <div>
                  <ul v-for="(info, sma) in item" :key="sma"> 
                      <li class="list-box"  ref="rightshift" >             
                      <input :id="info.auto_id"  type="checkbox" :value="info.auto_id" v-model="selectArr" :disabled="isdisabled" > 
                      <label :for="info.auto_id"  ref="shift"><div class="check-words">{{info.num}}-------{{info.name}}</div></label>
                      </li>
                  </ul> 
                  </div>
                </transition>          
              </el-collapse-item>
            </el-collapse>
          </div>
          <div  class="nodata" v-if="isif">
            暂无数据!
          </div>
          <div class="bottomBox" v-show="showMian">
              <div class="all_checked">
                <input id="checkbox"  type="checkbox"  @click="selectAll($event)" />
                <label for="checkbox" id="selectall"><div class="selectall-word">全选</div></label>
              </div>
              <div class="delete" v-if="this.selectArr.length === 0">删除</div>
              <div class="delete" @click="del" v-else>
                <svg class="icon delete-icon" >
                <use xlink:href="#iconshanchu"></use>
                  </svg> 删除({{this.selectArr.length}})</div>
            
          </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import axios from 'axios'
export default {
  name: 'Record',
  computed:{
      ...mapState(['addr','username']),
      getweek(){
        return function(time){
          var date;
          var dateArray = time.split("-");
          date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
          var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
          return weekday[date.getDay()]
        }}
      
    },
  data() {
    return {
      proData:  [],
      selectArr: [],
      edit: '编辑',
      showMian:false,
      showCheckbox:false,
      isdisabled:true,
      timekeys:[],
      value:[],
      isif:false
    }
  },
  
  mounted(){
   this.getlist()
  },
  methods:{
    getlist(){
      axios({
      method:'post',
      url:'/api/user/getAbsent',
      data:{addr:this.addr,
            username:this.username}
    }).then((res)=>{if(res.data!=='nodata'){
       this.proData = res.data.data,
        this.proData.forEach((item,i)=>{
        for(var key in item){       
          this.timekeys.push(key)
          this.value.push(item[key])
        }
      })
    }else{
      this.isif=true
    }
    })
    },
     publish () {
        for (let i = 0; i < this.$refs.rightshift.length; i++) {
          this.$refs.shift[i].style.position = 'relative'
          this.$refs.shift[i].style.transition = 'left 0.5s'
          this.$refs.shift[i].style.left = '.54rem'
        }
      },
     published () {
        for (let i = 0; i < this.$refs.rightshift.length; i++) {
          this.$refs.shift[i].style.position = 'relative'
          this.$refs.shift[i].style.transition = 'left 0.5s'
          this.$refs.shift[i].style.left = '-.5rem'
          
        }
      },
    changeEdit(){
        if (this.edit === '编辑' && this.isif ==false) {
          this.showMian = true
          this.publish()
          this.isdisabled = false
          this.showCheckbox=true
          this.edit = '完成'
        } else if (this.edit === '完成') {
          this.showMian = false
          this.published()
          this.isdisabled = true
          this.showCheckbox=false
          this.edit = '编辑'
          this.selectArr =  []
        }
    },
    confirmDel(){
        axios({
          method:'POST',
          url:'/api/user/delete',
          data:this.selectArr
        }).then((res)=>{
          if(res.data=='deletesucc'){
             this.getlist(),
            this.$message({
              message: '已成功删除！',
              type: 'success',
              duration:1000,
            }),
            this.selectArr = []
            }else{
            this.$message({
            type: 'info',
            message: '出了一个不可预料的错误'
          });}
        }).catch(()=>{
            this.$message({
            type: 'info',
            message: '请求失败'
          });
        })
        
      },
    
    del() {
       this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          showClose:false
        }).then(()=>{
          this.confirmDel()
          }
          ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }) 
    },
    selectAll(event) {
      var _this = this;
      //  console.log(event.currentTarget.checked)
      if (!event.currentTarget.checked) {
        this.selectArr = [];
      } else { //实现全选
        _this.selectArr = [];
        // console.log(this.value) 
        _this.value.forEach((item, i)=> {
          item.forEach((res,index)=>{
            _this.selectArr.push(res.auto_id)
            // console.log(res.auto_id) 
          })
          
        });
      }
    }
 
}
}
</script>

<style scoped>
  div>>>.el-collapse-item__content{
    padding-bottom: 0;
  }
  div>>>.el-collapse-item__header{
    background: #acd3ff;
    font-size: .36rem;
    height: .8rem;
    line-height: .8rem;
  }
  .list-box {
     
    width: 100%;
    height: .6rem;
    border-bottom: .02rem solid #e2e2e2;
  }
  .check-words{
   
    position: relative;
    bottom: .08rem;
    left: .36rem;
    display: inline;
    font-size: .32rem;
  }
  input{
      display: none;
      }
  label {
      position: relative;
      width: 100%;
			left: -0.56rem;
			height: .6rem;
			display: inline-block;
			line-height: .62rem;
			font-size: .32rem;
      
	}
  label::before {
			content: "";
      position: relative;
			width: .36rem;
			height: .36rem;
      margin-top: .12rem;
			border-radius: .4rem;
      display:inline-block;
      background: #eee;
  }

  input:checked+label::before{
    background-color: rgba(97, 231, 92, 0.8);
  }
  /* 被选中时label背景 */
  input:checked+label{
    background:-webkit-linear-gradient(left top,#ffffff,#96e06b);
  }
  .header{
    height: .86rem;
    background :rgb(100, 124, 204);
    color:#ffff;
    text-align: center
  }
  .edit{
    float: right;
    position: absolute;
    top: 0;
    right: .04rem;
    width: 1rem;
    height: .86rem;
    line-height: .86rem;
    font-size: .32rem;
    color:#fff;
    max-width:1rem ;
  }
  .icon-back{
    float: left;
    position: absolute;
    width: .64rem;
    height: .64rem;
    line-height: .64rem;
    font-size: .4rem;
    margin-top: .06rem;
  }
  .header-top{
   font-size: .36rem;
   line-height: .86rem;
  }
  .nodata{
    height: .8rem;
    line-height: .8rem;
    font-size: .4rem;
    color: #868280;
    text-align: center;
    border-bottom: .02rem solid #eee;
  }
  .center-box{
    height: 100%-2.06rem;
    overflow: hidden;
  }
  .bottomBox{
    position: fixed;
    bottom: 0;
    height: 1.2rem;
    line-height: 1.2rem;
    overflow: hidden;
    width: 100%;
    background: rgb(224, 224, 224,.75);
  }
  .all_checked{
    float: left;
    position: relative;
    width: 50%;
    height: 1.2rem;
    border-right: .02rem solid #e2d1c3;
  } 
 .delete{
    float: right;
    position: relative;
    height: 1.2rem;
    width: 49%;
    text-align: center;
    font-size: .3rem;
 }
 .delete-icon{
   font-size: .42rem;
 }
 #selectall {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   line-height: 100%;
   
 } 
 .selectall-word{
   display: inline;
   position: relative;
   left: 1rem;
   top: .16rem;
   font-size: .3rem;
 }
 label#selectall::before{
   position: relative;
   top: .24rem;
   left: .9rem;
   border: .02rem solid #868280;
   display: inline-block;
 }
</style>
